<!--选择期数-->
<template>
  <section class="dialog-more" v-if="isShow">
    <div class="bg" @click="back"></div>
    <div class="cont" @click.stop="">
      <div class="hd">
        <div class="turn-page">
          <div @click="prev" class="turn-btn"><img src="../../../../../static/images/dangjian/home/icon-prev.png" alt=""></div>
          <div class="year">{{year}}</div>
          <div @click="next" class="turn-btn"><img src="../../../../../static/images/dangjian/home/icon-next.png" alt=""></div>
        </div>
      </div>
      <div class="line"></div>
      <div class="bd">
        <section class="">

          <div class="no-list">
            <div @click="select(item)" v-for="item in list" class="no-item" :class="{'active': isSelected(item)}">{{item.numberStr}}期</div>
          </div>

          <div class="default-block-btn" @click="submit()">确认</div>

        </section>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'selectGroup',
    data () {
      return {
        isShow: false,
        year: '',
        no: '',
        list: [],
        type:'',//类型是否为副刊
      }
    },
    created () {
    },
    beforeDestroy () {
      this.tools.dialogDestroy()
    },
    methods: {
      submit () {
        if (this.selectData) {
          this.$emit('onSelect', this.selectData)
        }
        this.back()
      },
      prev () {
        this.setData(--this.year)
      },
      next () {
        this.setData(++this.year)
      },
      select (item) {
        this.selectData = item
        this.no = item.number
      },
      isSelected (item) {
        if (item.number == this.no) {
          this.selectData = item
          return true
        }
        return false
      },
      setData (year, no,type) {
        if(type===0||type===1){
          this.type = type;
        }

        this.selectData = null
        this.year = year
        this.no = no
        this.fetchService.groupInfoYear(this.year,this.type).then(res => {
          console.log(res)
          if (res.code === 0) {
            this.list = res.data
          }
        })
      },
      show () {
        this.tools.dialog(1, this)
        this.isShow = true
        return this
      },
      back () {
        this.tools.dialog(-1)
        this.isShow = false
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .dialog-more {
    position: fixed;
    top: 0; right: 0; left: 0; bottom: 0; z-index: 99;
    .bg {
      @include fullImg();
      background: rgba(0, 0, 0, 1);
      opacity: 0.5;
    }
    .cont {
      position: absolute;
      top: 50%; left: pxToRem(20px); right: pxToRem(20px);
      transform: translateY(-50%);
      background: #fff;
      border-radius: pxToRem(10px);
      padding: pxToRem(25px) pxToRem(40px) pxToRem(40px);
      .hd {
        font-size: pxToRem(30px);
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .close {
          width: pxToRem(30px);
          height: pxToRem(30px);
          position: relative;
          transform: rotate(45deg);
          i {
            background: #999;
            position: absolute;
          }
          i:first-child {
            top: 50%;
            left: 0;
            margin-top: -1px;
            width: pxToRem(30px);
            height: 2px;
          }
          i:last-child {
            top: 0;
            left: 50%;
            margin-left: -1px;
            height: pxToRem(30px);
            width: 2px;
          }
        }
      }
      .line {
        margin: pxToRem(26px) 0 pxToRem(36px);
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 1);
        opacity: 0.1;
      }
      .bd {

      }
    }
  }
  .no-list {
    display:flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    .no-item {
      width:25%;
      border-radius:10px;
      flex-shrink:0;
      text-align: center;
      padding:5px;
      margin:5px 0;
      font-size:18PX;
      font-weight:400;
      color:rgba(51,51,51,1);
      &.active {
        color:#fff;
        background:$theme-color;
      }
    }
  }
  .turn-page {
    display:flex;
    width:100%;
    justify-content: space-between;
    align-items:center;
    padding:0 70px;
    padding-top:20px;
    .turn-btn {
      width:25px;
      height:39px;
      img {
        @include fullImg();
      }
    }
    .year {
      font-size:18PX;
      font-weight:bold;
      color:rgba(51,51,51,1);
      line-height:60px;
    }
  }
</style>
